<template>
    <div class="PopConsume">
        <van-popup v-model:show="show" position="bottom" round>
            <div class="title">修改目标消耗热量</div>
            <van-cell-group inset>
                <van-field class="inputTarget input" v-model="targetConsume" label="目标热量(kcal)"
                    placeholder="请输入目标消耗热量" />
            </van-cell-group>
            <div class="btn">
                <van-button @click="save" type="primary" size="large">保存</van-button>
            </div>
            <div class="NumberKeyBord">
                <van-number-keyboard extra-key="." :show="showKeybord" @input="onInput" @delete="onDelete" />
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { showFailToast } from 'vant';


const show = ref(false);
const showKeybord = ref(true);
const targetConsume = ref('')
const emits = defineEmits(['selectConsume'])


const onInput = (val) => {
    if (val === '.' && targetConsume.value.includes('.')) return
    if (targetConsume.value && targetConsume.value.includes('.') && targetConsume.value.split('.')[1].length >= 1) return
    targetConsume.value += val
}

const onDelete = () => {
    targetConsume.value = targetConsume.value.slice(0, -1)
}

const save = () => {
    if (targetConsume.value === '') {
        showFailToast('请输入数据')
    } else {
        emits('selectConsume', { targetConsume: targetConsume.value })
        show.value = false
        targetConsume.value = ''
    }
}

defineExpose({
    show
})

</script>

<style lang="less" scoped>
.PopConsume {
    .title {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 0.53rem;
        font-size: 0.4rem;
    }

    .input {
        :deep(#van-field-1-label) {
            font-size: 13px;
            line-height: 1.28rem;
        }

        :deep(#van-field-2-label) {
            font-size: 13px;
            line-height: 1.28rem;
        }

        :deep(.van-field__body) {
            line-height: 1.28rem;

            .van-field__control {
                font-size: 0.53rem;
            }
        }
    }

    .btn {
        padding: 0 0.4rem;
        margin-bottom: 0.4rem;
    }

    .NumberKeyBord {
        height: 6.51rem;
    }
}
</style>